<template>
  <div class="product">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-head">
            <el-form :model="params" :inline="true" class="demo-form-inline" ref="queryParam">
              <!-- <el-form-item>
                <el-button icon="el-icon-plus" type="primary" @click="dialogAdd()">新增</el-button>
              </el-form-item>-->
              <!-- <div>
                <el-button icon="el-icon-plus" type="primary" @click="dialogAdd()">新增</el-button>
              </div> -->
              <!-- <div class="select_wrap"> -->
                <el-form-item label="系列" prop="serialId">
                  <el-select v-model="params.serialId" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in productSerialId"
                      :key="item.key"
                      :label="item.label"
                      :value="item.key"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称"  prop="cname">
                  <el-input
                    v-model="params.cname"
                    autocomplete="off" clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                  <el-select v-model="params.status" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in productStatus"
                      :key="item.key"
                      :label="item.label"
                      :value="item.key"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否热门" prop="isHot">
                  <el-select v-model="params.isHot" placeholder="请选择" clearable>
                    <el-option :key="1" label="是" :value="1"></el-option>
                    <el-option :key="0" label="否" :value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="look_btn" type="primary" @click="getList">查询</el-button>
                  <el-button @click="resetForm('queryParam')">重置</el-button>
                  <el-button icon="el-icon-plus" type="primary" @click="dialogAdd()">新增</el-button>
                  <el-button icon="el-icon-plus" type="primary" @click="dialogOrderCarry()">运费配置</el-button>
                </el-form-item>
              <!-- </div> -->
            </el-form>
          </div>
          <div class="boxcard-body">
            <el-table
              :data="list"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
              style="width: 100%"
            >
              <el-table-column type="index" label="排序" width="50"></el-table-column>
              <el-table-column prop="firstImageUrl" label="产品首图" width="150">
                <template slot-scope="scope">
                  <el-image :src="scope.row.firstImageUrl" style="width:60px;height:60px" :preview-src-list="[scope.row.firstImageUrl]"  />
                </template>
              </el-table-column>
              <el-table-column prop="cname" label="产品名称" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="price" label="价格" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="discount" label="折扣" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createdDate" label="生成时间" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="sales" label="销量" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="commentNum" label="产品评论数" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.commentNum}}<font v-if="scope.row.hasNewComment" style="color:#F56C6C">↑</font>
                </template>
              </el-table-column>
              <el-table-column prop="goodCommentRate" label="好评比例" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="status" label="状态" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag>{{ getProductStatus(scope.row.status) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="totalQuantity" label="库存总量" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="avalableQuantity" label="库存可用量" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="freezeQuantity" label="库存占用量" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="170" >
                <template slot-scope="scope">
                  <el-button @click="dialogField(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="dialogProductComment(scope.row)" type="text" size="small">产品评价</el-button>
                  <el-button @click="dialogStock(scope.row)" type="text" size="small">库存</el-button>
                  <el-button
                    @click="shelf(scope.row)"
                    type="text"
                    size="small"
                  >{{ scope.row.status == '2' ? '下架' : '上架' }}</el-button>
                  <el-button
                    @click="hot(scope.row)"
                    type="text"
                    size="small"
                  >{{ scope.row.isHot ? '取消热门' : '设置热门' }}</el-button>
                  <el-button
                    v-if="scope.row.status != 4"
                    @click="deleteProduct(scope.row)"
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="pageChange"
                :total="total"
                :current-page.sync="pageNum"
                :page-sizes="[10, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next"
              ></el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 产品库存维护 -->
    <div>
      <el-dialog
        title="产品库存"
        :visible.sync="dialogStockBox"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form :model="stock" label-position="right" label-width="100px" ref="stockForm">
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="stock.productName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="当前库存总量" prop="totalQuantity">
            <el-input v-model="stock.totalQuantity" :disabled="true"></el-input>
          </el-form-item>
          <div style="display: flex;flex-direction: row;position: relative;">
            <el-form-item style="flex: 1;" label="可用量" prop="avalableQuantity">
              <el-input v-model="stock.avalableQuantity" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item style="flex: 1;" label="冻结量" prop="freezeQuantity">
              <el-input v-model="stock.freezeQuantity" :disabled="true"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="可用库存增量" prop="addQuantity">
            <el-input v-model="stock.addQuantity"></el-input>
          </el-form-item>
          <label>提示：输入负数，则减少库存量，输入正数增加库存</label>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelStockClick">取 消</el-button>
          <el-button type="primary" @click="confirmStockClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <comment v-bind:id="id" v-bind:visible.sync="commentDialog"></comment>
    </div>
    <detail
      ref="productDetail"
      v-bind:id="productDetailId"
      v-bind:visible.sync="productDetailDialog"
      @success="getList"
    ></detail>
    <orderCarry
      ref="orderCarry"
      v-bind:visible.sync="orderCarryDialog"
    ></orderCarry>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import comment from "./comment";
import detail from "./detail";
import orderCarry from "./orderCarry";
export default {
  components: { comment, detail,orderCarry },
  data() {
    return {
      Label: "", //默认鞋子类型
      params: {
        serialId: null,
        cname: null,
        status: null,
        isHot: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表

      // 数据字典
      productStatus: [],
      productSerialId: [],
      productColor: [],
      // 库存
      dialogStockBox: false,
      stock: {
        productId: null,
        productName: null,
        totalQuantity: null,
        avalableQuantity: null,
        freezeQuantity: null,
        addQuantity: null
      },
      id: "",
      commentDialog: false,
      productDetailId: "",
      productDetailDialog: false,
      orderCarryDialog:false
    };
  },
  created() {
    this.ininDict();
    this.getList(this.pageNum, this.pageSize);
  },
  watch: {},
  methods: {
    async ininDict() {
      await get("dict/productSerial").then(res => {
        this.productSerialId = res.data.data;
      });
      await get("dict/productColor").then(res => {
        this.productColor = res.data.data;
      });
      await get("product/productStatus").then(res => {
        this.productStatus = res.data.data;
      });
    },
    getProductStatus(status) {
      for (let i = 0; i < this.productStatus.length; i++) {
        if (this.productStatus[i].key === status) {
          return this.productStatus[i].label;
        }
      }
      return "";
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 选择了鞋子的类型
    selectLabel(e) {
      console.log(e, "选择了鞋子的类型");
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      get("/product/pageProduct", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        cname: this.params.cname,
        serialId: this.params.serialId,
        status: this.params.status,
        isHot: this.params.isHot
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });
        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    dialogStock(row) {
      get("/product/getStock", { id: row.id }).then(res => {
        let arr = res.data.data;
        if (arr != null && arr.length > 0) {
          this.stock = {
            productId: row.id,
            productName: row.cname,
            totalQuantity: arr[0].totalQuantity,
            avalableQuantity: arr[0].avalableQuantity,
            freezeQuantity: arr[0].freezeQuantity,
            addQuantity: null
          };
        } else {
          this.stock = {
            productId: row.id,
            productName: row.cname,
            totalQuantity: 0,
            avalableQuantity: 0,
            freezeQuantity: 0,
            addQuantity: null
          };
        }
        this.dialogStockBox = true;
      });
    },
    shelf(e) {
      let url = e.status == 2 ? "product/downShelf" : "product/upShelf";
      postXform(url, { id: e.id }).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.getList();
      });
    },
    hot(e) {
      postXform("product/hot", { id: e.id }).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        e.isHot = !e.isHot;
      });
    },
    dialogAdd() {
      this.productDetailId = "";
      this.productDetailDialog = true;
      this.$refs.productDetail.reset();
    },
    // 编辑按钮打开编辑字段弹窗
    dialogField(e) {
      this.productDetailId = e.id;
      this.productDetailDialog = true;
      this.$refs.productDetail.getProduct(e.id);
    },
    confirmStockClick() {
      let param = {
        productId: this.stock.productId,
        addQuantity: this.stock.addQuantity
      };
      postXform("/product/setStock", param).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.dialogStockBox = false;
      });
    },
    cancelStockClick() {
      this.dialogStockBox = false;
    },
    deleteProduct(row) {
      this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          postXform("/product/delete", { id: row.id }).then(res => {
            this.$message({ message: "删除成功", type: "success" });
            this.getList();
          });
        })
        .catch(() => {});
    },
    dialogProductComment(row) {
      this.id = row.id;
      this.commentDialog = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    },
    dialogOrderCarry() {
      this.orderCarryDialog=true;
      this.$refs.orderCarry.initOrderCarry();
    }
  }
};
</script>

<style lang="scss" scoped>
// .formItem {
//   display: flex;
//   flex-direction: row;
// }
// @import "../../assets/css/product/product.scss";
</style>
